<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../dist/plain-ui.min.css"/>
</head>
<body>

<div id="app"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.min.js"></script>
<script src="./plain-ui-composition.min.js"></script>
<script src="../../dist/plain-ui.min.js"></script>
<script>

    const {createApp, defineComponent, reactive} = Vue
    const {PlButton, PlInput, PlTagInput, PlRoot, $$message} = PlainUi
    const {designComponent} = PlainUiComposition

    const Entry = defineComponent({
        template: `
          <pl-root>
            <pl-collapse title="BUTTON">
              <pl-button @click="$message('hello world')">this is app</pl-button>
            </pl-collapse>
            <pl-collapse title="INPUT">
              <pl-input status="primary" v-model="state.text"/>
              {{state.text}}
            </pl-collapse>
            <pl-collapse title="TagInput">
              <pl-tag-input v-model="state.formData.tagList"/>
              {{JSON.stringify(state.formData.tagList)}}
            </pl-collapse>
          </pl-root>
        `,
        setup() {
            const state = reactive({
                formData: {
                    tagList: ['hello'],
                },
                text: 'hello world',
            })
            return {
                state,
            }
        },
    })

    const app = createApp(Entry)
    app.use(PlainUi.default)
    app.mount(document.querySelector('#app'))
</script>
</body>
</html>
